import React, { Component } from 'react';
import './index.scss';
import { MenuOutlined } from '@ant-design/icons';
import { Drawer } from 'antd';
import Menu from '../Menu/index';
class index extends Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: false
        }
    }
    showDrawer = () => {
        this.setState((state) => ({
            visible: true
        }))
    };
    onClose = () => {
        this.setState((state) => ({
            visible: false
        }))
    };
    middlewareOnSelect(type = '', keyword = '', current = 1, pageSize = 5) {
        this.onClose();
        this.props.onSelect(type, keyword, current, pageSize);
    }

    render() {
        let e_width = this.props.e_width

        return (
            <>
                {e_width<800 && <div className="mobile-menu" onClick={this.showDrawer.bind(this)} >
                    <MenuOutlined />
                </div>
                }
                <Drawer
                    title="H-blog"
                    placement="left"
                    closable={false}
                    onClose={this.onClose.bind(this)}
                    visible={this.state.visible}
                >
                    <Menu onSelect={this.middlewareOnSelect.bind(this)} />
                </Drawer>
            </>

        );
    }
}



export default index;